<template>
	<div class="star" :class="starType">
		<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
	</div>
</template>

<script type="text/ecmascript-6">
	//定义星星的个数
	const LENGTH = 5;
	//这样定义方便日后修改
	//这是星星种类, 有on的有半颗的也有无色的
	const CLS_ON ="on";
	const CLS_HALF = "half";
	const CLS_OFF = "off";
	
	export default {
	    props:{
	        //判断是24,36还是48的星星大小
	        size:{
	            type:Number
	        },
		    //后台获取的数据,有可能是分数,小数,就是评分啦
		    score:{
	            type:Number
		    }
	    },
		computed:{
	        starType() {
	            return 'star-'+this.size;
	        },
			itemClasses() {
	            let result=[];
	            //分数是以过半分向上取整
				//4.2分,4颗星星,4.7分,4.5颗星星
	            let Score = Math.floor(this.score * 2 )/2;
	            //判断有没有小数,渲染半颗星星
	            let hasDecimal = Score %1 !==0;
	            //获得整数,渲染整颗星星
	            let integer = Math.floor(Score);
	            //渲染整颗星星
	            for (let i=0;i<integer;i++){
	                result.push(CLS_ON)
	            }
	            //渲染半颗星星
	            if(hasDecimal){
	                result.push(CLS_HALF)
	            }
	            //最后渲染没色的星星
	            while(result.length<LENGTH){
	                result.push(CLS_OFF)
	            }
	            //最后返回result数组
	            return result;
			}
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin"
	.star
		font-size:0
		.star-item
			display:inline-block
			background-repeat:no-repeat
		&.star-48
			.star-item
				width: 20px
				height: 20px
				margin-right :22px
				background-size:20px 20px
				&:last-child
					margin-right :0px
				&.on
					bg-img('star48_on')
				&.half
					bg-img('star48_half')
				&.off
					bg-img('star48_off')
		&.star-36
			.star-item
				width: 15px
				height: 15px
				margin-right :6px
				background-size:15px 15px
				&:last-child
					margin-right :0px
				&.on
					bg-img('star36_on')
				&.half
					bg-img('star36_half')
				&.off
					bg-img('star36_off')
		&.star-24
			.star-item
				width: 10px
				height: 10px
				margin-right :3px
				background-size:10px 10px
				&:last-child
					margin-right :0px
				&.on
					bg-img('star24_on')
				&.half
					bg-img('star24_half')
				&.off
					bg-img('star24_off')
		
			
</style>